<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>送毛姐</title>
  <style>
    body {
      background-color: #000;
      color: white;
      font-size: 32px;
    }

    .wrapper {
      text-align: center;
      height: 100vh;
      align-content: center;
      letter-spacing: 5px;
    }
  </style>
  　
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <audio id="audioPlayer" src="https://www.qtings.com/uploads/tracks/821031221_781982805_627408944.mp3
  ">
  </audio>
  <div class="wrapper">
    <p></p>
    <div></div>
  </div>
  <!-- <div class="envelope">
    <div class="flap-top"></div>
    <div class="flap-bottom"></div>
    <div class="letter">
      <p>亲爱的用户，<br>感谢您的打开。</p>
    </div>
  </div> -->

  <script>
    let text = "准备好了吗?";
    const speed = 200; // 每个字符的显示时间（毫秒）
    let index = 0; // 当前显示到哪个字符
    let textElement = document.querySelector('.wrapper p');
    function typeWriter() {
      if (index < text.length) {
        textElement.textContent += text.charAt(index);
        index++;
        setTimeout(typeWriter, speed);
      }
    }
    setTimeout(typeWriter, 1500)
    document.addEventListener("DOMContentLoaded", () => {
      var audio = document.getElementById('audioPlayer');
      // 设置播放时间（20分钟 = 1200秒）
      audio.currentTime = 20;
      setTimeout(() => {
        audio.play();
      },100)
      $('.wrapper').click(() => {
        $('.wrapper p').fadeIn(500);
        $('.wrapper p').text("");
        text = '祝毛姐天天开心、美丽~'
        index = 0;
        setTimeout(typeWriter, 1000)
        setTimeout(() => {
          textElement = document.querySelector('.wrapper div')
          text = '---孔小弟'
          index = 0;
          typeWriter();
        }, 4000)
      })
    })

  </script>
</body>

</html>